<template>

	<view class="section">
		<view v-for="(item, index) in goodsList" :key="index" class="item" @click="detail(item.pid)">
			<view class="image-wrapper">
				<image class="cover" :src="item.defaultAlbum" mode="aspectFill"></image>
				<image class="video" src="../static/imgs/ic_home_play.png" mode=""></image>
				<text class="label">视频验真</text>
			</view>
			<view class="data">
				<view class="basicData">
					
					<view class="name">
						<view class="title">标题标题标题标题...</view>
						<view class="flex">
							<text class="price">53万</text>
							<text class="layout">3室2厅</text>
							<text class="area">90 ㎡</text>
						</view>
					</view>

				</view>
				<view class="flex build">
					<view class=" clamp">
						<view class="flex">
							<image src="../static/imgs/ic_qm_default_head.jpg" mode=""></image>
							<view class="nickname">
								<view >昵称</view>
								<view>骑马房产</view>
							</view>
						</view>
						
						
					
					</view>
					<view class="label">
						<text>花园洋房</text>
						<text>花园洋房</text>
					</view>
				</view>
				

				
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "guess",
		props: ["goodsList"],
		data() {
			return {

			}
		},
		methods: {
			detail(id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			}
		}


	}
</script>

<style lang="scss">
	.section {
		display: flex;
		flex-wrap: wrap;
		padding:  20upx 0;

		.item {
			display: flex;
			width: 100%;
			padding-bottom: 29upx;
			background: #fff;
			margin-bottom: 21upx;
			// box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
			border-bottom: 1px solid #EEEEEE;

			

		}
.data{
	width: 60%;
		.basicData {
			display: flex;

			

			.name {
				margin: 10upx 0 50upx 0;
				width: 100%;

				.title {
					display: flex;
					justify-content: space-between;
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 30upx;
					color: rgba(34, 34, 34, 1);
					font-weight:bold;
					margin-bottom: 20upx;
					
					
					
				}

				.price {
					font-size: 30upx;
					font-weight: bold;

					color: rgba(255, 52, 52, 1);
				}

				.layout,
				.area {
					color: #666666;
					color: rgba(102, 102, 102, 1);
					margin-left: 30upx;
					font-size: 22upx;
					margin-top: 4upx;
				}
			}

			

		}
		
		.build {
			justify-content: space-between;
			
			.clamp {
				font-size: 28upx;
				font-weight: 400;
				color: #222222;
			
				.nickname {
					font-size: 18upx;
					color: rgba(153, 153, 153, 1);
				}
			
			
				image {
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					vertical-align: middle;
				}
			}
		
			.region {
				font-size: 20upx!important;
				color: rgba(102, 102, 102, 1);
			}
		
			.label {
				text {
					display: inline-block;
					font-size: 14upx!important;
					color: rgba(153, 153, 153, 1);
					border: 1px solid rgba(204, 204, 204, 1);
					border-radius: 8upx;
					padding: 4upx 4upx;
					margin-left: 4upx;
					fontSize:14rpx;
					scale: 0.3;
					margin-top: 20upx;
				}
			}
		}
}
		

		.image-wrapper {
			width: 40%;
			height: 220upx;
			border-radius: 3px;
			overflow: hidden;
			background: #fff;
			position: relative;
			margin-right: 20upx;

			.cover {
				display: block;
				width: 100%;
				height: 220upx;
				border-radius: 20upx;
				position:absolute;
				top: 0;
				left: 0;
				

			}
			.video{
				position:absolute;
				width:60upx;
				height:60upx;
				left: 50%;
				margin-left: -30upx;
				top: 50%;
				margin-top: -30upx;
			}
			.label{
				position:absolute;
				width:120upx;
				height:40upx;
				background:linear-gradient(90deg,rgba(255,26,118,1) 0%,rgba(255,123,41,1) 100%);
				border-radius:12px 0px 20px 0px;
				text-align: center;
				color: #fff;
				font-size: 19upx;
				left: 0;
				top: 0;
			}
		}






	}
</style>
